<template>
  <div class="app-container">
    <el-card>
      <!--用户数据-->
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="实践课程">
              <el-select v-model="queryParams.practiceTaskType" placeholder="请选择" clearable @change="changeType">
                <el-option v-for="item in practiceTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="任务名称">
              <el-select v-model="queryParams.practiceTaskId" filterable clearable @change="handleQuery">
                <el-option v-for="item in selectorList" :key="item.id" :label="item.taskName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报名时间">
              <el-date-picker v-model="dateRangeQuery" @change="handleQuery" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" style="width: 100%" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="queryParams.participationStatus" placeholder="请选择" clearable @change="handleQuery">
                <el-option v-for="item in taskStatusList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" filterable clearable @change="handleQuery('学院')" multiple
                collapse-tags>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业">
              <el-select v-model="queryParams.faceZy" filterable clearable @change="handleQuery('专业')" multiple
                collapse-tags>
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级">
              <el-select v-model="queryParams.njName" clearable @change="handleQuery('年级')">
                <el-option v-for="item in pronjAllList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级">
              <el-select v-model="queryParams.faceBj" filterable clearable @change="handleQuery" multiple collapse-tags>
                <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model.trim="queryParams.studentName" @input="handleQuery" placeholder="输入学生姓名" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学号">
              <el-input v-model.trim="queryParams.studentNumber" @input="handleQuery" placeholder="输入学生学号" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item id="butId">
              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="success" plain size="mini" @click="submitAllForm" :disabled="multiple">批量通过</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain size="mini" @click="handleAllDelete" :disabled="multiple">批量驳回</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button plain size="mini" @click="handleExport">导出</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" :selectable="selectable" />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="学生姓名" align="center" width="100" key="studentName" prop="studentName"
          :show-overflow-tooltip="true" />
        <el-table-column label="学号" align="center" key="studentNumber" prop="studentNumber"
          :show-overflow-tooltip="true" />
        <el-table-column label="学院" align="center" key="xyName" prop="xyName" />
        <!-- <el-table-column label="年级" align="center" key="njName" prop="njName" /> -->
        <!-- <el-table-column label="专业" align="center" key="zyName" prop="zyName" /> -->
        <el-table-column label="班级" align="center" key="bjName" prop="bjName" />
        <el-table-column label="任务名称" width="140" align="center" key="practiceTaskName" prop="practiceTaskName"
          :show-overflow-tooltip="true" />
        <el-table-column label="报名时间" width="100" align="center" key="applyTime" prop="applyTime"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ (scope.row.applyTime || '').slice(0, 16) }}
          </template>
        </el-table-column>
        <el-table-column label="实践课程" align="center" key="practiceTaskTypeName" prop="practiceTaskTypeName" />
        <el-table-column label="积分上限" align="center" width="80" key="pointsCap" prop="pointsCap" />
        <el-table-column label="报名状态" align="center" key="participationStatusName" prop="participationStatusName">
          <template slot-scope="scope">
            {{ scope.row.applyCheck && scope.row.applyCheck == 1 ? scope.row.participationStatusName : '无需审核' }}
          </template>
        </el-table-column>
        <el-table-column label="项目时间" align="center" width="180" key="acquisitionPoint" prop="acquisitionPoint"
          :show-overflow-tooltip="true">
          <template slot-scope="scope">
            {{ (scope.row.startTime || '').slice(0, 10) }} ~ {{ (scope.row.endTime || '').slice(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.participationStatus == 1" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['practice:user:applicaCheck']">审核</el-button>
            <el-button v-if="scope.row.participationStatus == 1" style="color: #f56c6c;" type="text"
              @click="handleDelete(scope.row)" v-hasPermi="['practice:user:applicaCheck']">驳回</el-button>

            <el-button v-else type="text" @click="handleUpdate(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog title="报名详情审核" :visible.sync="open" width="60%" center append-to-body class="dialogClass">
      <el-form label-position="right" label-width="80px">
        <el-row>
          <el-card>
            <el-col :span="24">
              <el-form-item label="" label-width="0">
                <div class="inforClass">任务信息</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务名称: ">
                <span>{{ form.practiceTaskName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践课程: ">
                <span>{{ form.practiceTaskTypeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="积分上限: ">
                <span>{{ form.pointsCap }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务时间: ">
                <span>{{ (form.startTime || '').slice(0, 10) }} ~ {{ (form.endTime || '').slice(0, 10) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报名审核: ">
                <span>{{ form.applyCheck === 0 ? '无需审核，直接参与' : '需要审核通过后参与' }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.peoplesNumberAstrict && form.peoplesNumberAstrict > 0">
              <el-form-item label="人数: ">
                <span> {{ form.applyPeoples || 0 }} / {{ form.peoplesNumberAstrict }}</span>
              </el-form-item>
            </el-col>
          </el-card>
          <el-card style="margin-top: 20px">
            <el-col :span="24">
              <el-form-item label="" label-width="0">
                <div class="inforClass">学生信息</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名: " label-width="80px">
                <el-input v-model="form.studentName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学号: " label-width="80px">
                <el-input v-model="form.studentNumber" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学院: " label-width="80px">
                <el-input v-model="form.xyName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级: " label-width="80px">
                <el-input v-model="form.bjName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报名时间: " label-width="80px">
                <el-input v-model="form.applyTime" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报名状态: " label-width="80px">
                <el-input v-model="form.enrollmentStatus" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="form.enrollmentStatus == '驳回' && form.reason">
              <el-form-item label="驳回原因: " label-width="80px">
                <el-input v-model="form.reason" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-card>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDelete(form)" v-hasPermi="['practice:user:applicaCheck']"
          v-if="form.participationStatus == 1">
          驳 回
        </el-button>
        <el-button type="primary" @click="submitForm" v-hasPermi="['practice:user:applicaCheck']"
          v-if="form.participationStatus == 1">
          通 过
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import { typeCongfigList } from "@/api/semesManage";
import { selectorListTaks } from "@/api/task/index";
import { getApplyCheckList, checkApply } from "@/api/applicaAudits/index";
import { listProxy, listProzy, listProbj, pronjList } from "@/api/project/prold";
export default {
  name: "applicaAudits",
  data() {
    return {
      loading: false,
      ids: [],
      numbers: [],
      multiple: true,
      total: 0,
      tableList: [],
      title: "",
      open: false,
      dateRangeQuery: [],
      proxyList: [],
      prozyList: [],
      probjList: [],
      pronjAllList: [],
      selectorList: [],
      practiceTypeList: [],
      taskStatusList: [
        { name: '无需审核', id: 0 },
        { name: '未审核', id: 1 },
        { name: '审核通过', id: 2 },
        { name: '驳回', id: 3 }
      ],
      form: {},
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        xyId: undefined
      },
    };
  },
  watch: {},
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });
    this.getTypeCongfigList();
    this.getSelectorListTaks();
    this.getList();
    this.getListProxy();
    this.getListProzy();
    this.getListProbj();
    this.getListPronj();
  },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
      });
    },
    getSelectorListTaks() {
      selectorListTaks({ practiceType: this.queryParams.practiceTaskType, taskNameSort: 'desc' }).then(response => {
        this.selectorList = response.rows;
      })
    },
    selectable(row) {
      return row.participationStatus === 1;
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      const query = {
        xyIds: this.queryParams.faceXy,
        zyIds: this.queryParams.faceZy,
        bjIds: this.queryParams.faceBj,
        ...time,
        ...this.queryParams
      };
      if (this.queryParams.participationStatus >= 0) {
        query.applyCheck = query.participationStatus === 0 ? 0 : query.participationStatus > 0 ? 1 : null;
        query.applyCheck === 0 ? delete query.participationStatus : '';
      }
      query.faceXy ? delete query.faceXy : '';
      query.faceZy ? delete query.faceZy : '';
      query.faceBj ? delete query.faceBj : '';
      getApplyCheckList(query).then(
        (response) => {
          this.tableList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      ).catch(err => {
        this.loading = false;
      });
    },
    // 查询学院
    getListProxy() {
      listProxy().then((response) => {
        this.proxyList = response.rows;
      });
    },
    // 查询专业
    getListProzy() {
      this.prozyList = [];
      listProzy({ xyIds: this.queryParams.faceXy }).then((response) => {
        this.prozyList = response.rows;
        this.probjList = [];
        if (response.rows.length > 0) {
          this.getListProbj();
        }
      });
    },
    // 查询班级
    getListProbj() {
      let query = {
        zyIds: this.queryParams.faceZy && this.queryParams.faceZy.length > 0 ? this.queryParams.faceZy : this.prozyList.map(v => v.id),
        njIds: this.queryParams.njName || this.pronjAllList.map(v => v.name)
      };
      listProbj(query).then((response) => {
        this.probjList = response.rows;
      });
    },
    // 查询年级
    getListPronj() {
      pronjList().then((response) => {
        this.pronjAllList = response.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    handleExport() {
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      this.download('project/apply/exportApplyCheck', {
        ...this.queryParams,
        ...time
      }, `报名审核.xlsx`)
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    /** 搜索按钮操作 */
    handleQuery(type) {
      if (type == '学院') {
        this.prozyList = [];
        this.queryParams.faceZy = null;
        this.queryParams.faceBj = null;
        this.getListProzy(this.queryParams.faceXy);
      }

      if (type == '专业' || type == '年级') {
        this.queryParams.faceBj = null;
        if (this.prozyList.length > 0) {
          this.getListProbj();
        }
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    changeType() {
      this.getSelectorListTaks();
      this.handleQuery();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeQuery = [];
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
      this.getListProxy();
      this.getListProzy();
      this.getListProbj();
      this.getListPronj();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = { ...row };
      this.form.enrollmentStatus = this.form.applyCheck == 0 ? '无需审核' : this.form.participationStatusName;
      this.form.applyTime = (row.applyTime || '').slice(0, 16);
      this.open = true;
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.peoplesNumberAstrict >= 1 && this.form.applyPeoples >= this.form.peoplesNumberAstrict) {
        this.$confirm('报名通过人数超过限制人数，是否确定通过？', '确认审核', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success',
        }).then(() => {
          checkApply({ ids: [this.form.id], participationStatus: 2 }).then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("审核成功");
              this.ids = [];
              this.form = {};
              this.getList();
              this.open = false;
            }
          })
        }).catch(() => { });
      } else {
        checkApply({ ids: [this.form.id], participationStatus: 2 }).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("审核成功");
            this.ids = [];
            this.form = {};
            this.getList();
            this.open = false;
          }
        })
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    // 批量通过
    submitAllForm() {
      this.$confirm('是否确认同时审核"' + this.ids.length + '"条实践报告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).then(() => {
        checkApply({ ids: this.ids, participationStatus: 2 }).then(() => {
          this.ids = [];
          this.getList();
          this.$modal.msgSuccess("审核成功");
        });
      }).catch(() => { });
    },
    // 批量驳回
    handleAllDelete() {


      this.$confirm('是否确认驳回"' + this.ids.length + '"条报名审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showInput: true,  // 启用输入框
        inputPlaceholder: '请输入驳回原因',  // 输入框提示文本
      }).then(input => {
        if (!input.value) {
          this.$modal.msgWarning("请添写驳回理由!")
          this.handleDelete(row)
          return
        };

        checkApply({ ids: this.ids, reason: input.value, participationStatus: 3 }).then(() => {
          this.ids = [];
          this.open = false;
          this.getList();
          this.$modal.msgSuccess("驳回成功");
        });
      }).catch(() => { });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认驳回学生"' + row.studentName + '"的报名审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showInput: true,  // 启用输入框
        inputPlaceholder: '请输入驳回原因',  // 输入框提示文本
      }).then(input => {
        if (!input.value) {
          this.$modal.msgWarning("请添写驳回理由!")
          this.handleDelete(row)
          return
        };
        checkApply({ ids: [row.id], reason: input.value, participationStatus: 3 }).then(() => {
          this.form = {};
          this.ids = [];
          this.open = false;
          this.getList();
          this.$modal.msgSuccess("驳回成功");
        });
      }).catch(() => { });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep input {
  padding: 0 5px !important;
}

.fileImage {
  display: flex;
  overflow-x: auto;
}

::v-deep .el-col-1 {
  #butId {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}

.dialogClass {
  ::v-deep .el-dialog__body {
    padding-top: 0 !important;
  }

  ::v-deep .el-form-item {
    margin-bottom: 10px !important;

    .el-input {
      width: 80% !important;
    }
  }

  .inforClass {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    /* 使用 flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
  }

  .inforClass::before {
    content: '';
    width: 5px;
    height: 25px;
    background-color: #419eff;
    margin-right: 10px;
    display: inline-block;
  }
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .el-range__close-icon {
  width: 0 !important;
}

::v-deep .el-date-editor {
  input {
    padding: 0 !important;
  }
}
</style>
